<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/echarts.js"></script>
	<script type="text/javascript">
	window.onload=function(){
		/*图表1	开始*/
		var dom = document.getElementById("container");
		var myChart = echarts.init(dom);
		option = {
			// 鼠标移入提示
		    tooltip: {
		        trigger: 'item',
		        formatter: "{a} <br/>{b}: {c} ({d}%)"
		    },
		    // 侧边栏显示
		    legend: {
		        orient: 'vertical',
		        x: 'left',
		        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
		    },
		    series: [
		        {
		            name:'访问来源',
		            type:'pie',
		            radius: ['30%', '70%'],
		            avoidLabelOverlap: false,//中间的字显示一行
		            label: {
		                normal: {
		                    show: false,
		                    position: 'center'
		                },
		                emphasis: {
		                    show: true,
		                    textStyle: {
		                        fontSize: '30',
		                        fontWeight: 'bold'
		                    }
		                }
		            },
		            // labelLine: {
		            //     normal: {
		            //         show: false
		            //     }
		            // },
		            data:[
		                {value:335, name:'直接访问'},
		                {value:310, name:'邮件营销'},
		                {value:234, name:'联盟广告'},
		                {value:135, name:'视频广告'},
		                {value:1548, name:'搜索引擎'}
		            ]
		        }
		    ]
		};
		myChart.setOption(option,true);
		/*图表1	结束*/
		/*图表2	开始*/
		echarts.init(document.getElementById("container2")).setOption({
			legend: {
		        orient: 'vertical',
		        x: 'left',
		        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
		    },
			series : [
		        {
		            name: '访问来源',
		            type: 'pie',
		            radius: '55%',
		            data:[
		                {value:235, name:'视频广告'},
		                {value:274, name:'联盟广告'},
		                {value:310, name:'邮件营销'},
		                {value:335, name:'直接访问'},
		                {value:400, name:'搜索引擎'}
		            ]
		        }
		    ]
		});
		/*图表2	结束*/
	}
	</script>
</head>
<body>
	<div id="container" style="width: 600px;height:400px;">111</div>
	<div id="container2" style="width: 600px;height:400px;">222</div>
</body>
</html>